<template>
	<view>
		<view style="position:fixed;top:9999px;">
			<canvas :style="'width:'+imageW+'px;height:'+imageH+'px;'" canvas-id="myCanvas"></canvas>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'image-compress',
		props: {
			quality: {
				//质量
				type: Number,
				default: 1
			},
			maxwh: {
				//最大宽高尺寸像素
				type: Number,
				default: 800
			},
			changes: {
				//监听变化
				type: Function,
				default: null
			}
		},

		data() {
			return {
				imageW: this.maxwh,
				imageH: this.maxwh,
				redio: 1,
			}
		},
		methods: {
			yasuo(img, item) {
				var that = this;
				return new Promise((resolve, reject) => {

					if (item.type == 'video') {
						var res = {};
						res.tempFilePath = item.url;
						res.fileType = 'mp4';
						res.width = res.videow;
						res.height = res.videoh;
						resolve(res)
						return;
					}
					uni.getImageInfo({
						src: img,
						success: (res) => {
							// #ifndef H5
							if (res.type == 'gif') {
								res.tempFilePath = res.path;
								res.fileType = 'gif';
								res.width = res.width;
								res.height = res.height;

								resolve(res)
							} else {
								uni.compressImage({
									src: res.path,
									quality: 80,
									success: res2 => {
										res2.tempFilePath = res2.tempFilePath;
										res2.width = res.width;
										res2.height = res.height;
										res2.fileType = res.type;
										resolve(res2)
									}
								})
							}
							// #endif
							// #ifdef H5
							// 通过XMLHttpRequest对象将Blob链接转换为Blob对象
							const xhr = new XMLHttpRequest();
							xhr.open('GET', res.path);
							xhr.responseType = 'blob';
							xhr.onload = () => {
								var blob = xhr.response;
								var ext = blob.type.split('/').pop(); // 获取文件的后缀   
								if (ext == 'gif') {
									var res2 = {};
									res2.oldWidth = res.width;
									res2.oldHeight = res.height;
									res2.width = res.width;
									res2.height = res.width;
									res2.path = res.path;
									res2.tempFilePath = res.path;
									res2.fileType = 'gif';
									resolve(res2)
								} else {
									var fileType = ext;
									let originHeight = res.height;
									let originWidth = res.width;
									let maxWidth = 580; // 最大宽
									let maxHeight = 740; // 最大高
									let targetWidth = originWidth
									let targetHeight = originHeight;
									if (originWidth > maxWidth || originHeight > maxHeight) {
										if (originWidth / originHeight > maxWidth / maxHeight) {
											targetWidth = maxWidth;
											targetHeight = Math.round(maxWidth * (originHeight /
												originWidth));
										} else {
											targetHeight = maxHeight;
											targetWidth = Math.round(maxHeight * (originWidth /
												originHeight));
										}
									}
									that.cWidth = targetWidth;
									that.cHeight = targetHeight
									// 将图片写入画布
									var ctx = uni.createCanvasContext('myCanvas', this);
									ctx.drawImage(res.path, 0, 0, targetWidth, targetHeight);
									ctx.draw(true, (e) => {

										uni.canvasToTempFilePath({
											x: 0,
											y: 0,
											width: targetWidth,
											height: targetHeight,
											destWidth: targetWidth,
											destHeight: targetHeight,
											quality: 1,
											canvasId: 'myCanvas',
											fileType: fileType,
											success: (res2) => {

												res2.oldWidth = res.width;
												res2.oldHeight = res.height;
												res2.width = targetWidth;
												res2.height = targetHeight;
												res2.path = res.path;
												res2.tempFilePath = res2
													.tempFilePath;
												res2.fileType = fileType;
												resolve(res2)
											}
										}, this);
									});


								}
							};
							xhr.send();
							// #endif


						}
					})
				})
			},
			iscanvas(res, fileType) {
				var that = this;
			},
			yasuoImg(imgs, val) {
				var val = val || [];
				var imgs = imgs;
				return new Promise((resolve, reject) => {
					var resolves = resolves || resolve;
					if (typeof imgs == 'object') {
						if (imgs.length > 0) {
							this.yasuo(imgs[0]['url'], imgs[0]).then(e => {
								val.push(e)
								var imgs2 = [];
								for (var i = 0; i < imgs.length; i++) {
									if (i != 0) {
										imgs2.push(imgs[i])
									}
								}
								this.yasuoImg(imgs2, val).then(e => {
									resolve(e)
								})

							})
						} else {
							resolve(val)
							this.$emit("changes", val);
						}
					} else {
						this.yasuoImg(imgs).then(e => {
							resolve(val)
							this.$emit("changes", val);
						})
					}
				})
			}
		}

	}
</script>

<style>
</style>